Code Playground

console.log("Event Fired")
// Store the values of the gauges
const gaugeValues = {
    gauge1: Math.random(),
    gauge2: Math.random(),
    gauge3: Math.random(),
    gauge4: Math.random(),
    gauge5: Math.random(),
    gauge6: Math.random()
};

// Function to get the color based on the value
function getColor(value) {
    if (value > 0.9) return 'red';
    if (value > 0.75) return 'orange';
    if (value > 0.5) return 'yellow';
    return '#4caf50';
}

// Function to draw a gauge
function drawGauge(canvasId, value) {
    const canvas = document.getElementById(canvasId);
    const ctx = canvas.getContext('2d');
    const centerX = canvas.width / 2;
    const centerY = canvas.height / 2;
    const radius = Math.min(centerX, centerY) - 10;
    const endAngle = (Math.PI / 2) + (Math.PI * 2 * value);
    const color = getColor(value);

// Clear the canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw the background circle
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius, 0, Math.PI * 2, false);
    ctx.fillStyle = '#ddd';
    ctx.fill();

// Draw the gauge
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius, Math.PI / 2, endAngle, false);
    ctx.lineWidth = 20;
    ctx.strokeStyle = color;
    ctx.stroke();

// Draw the needle
    ctx.beginPath();
    ctx.moveTo(centerX, centerY);
    ctx.lineTo(centerX + radius * Math.cos(endAngle), centerY + radius * Math.sin(endAngle));
    ctx.lineWidth = 5;
    ctx.strokeStyle = '#000';
    ctx.stroke();
}

// Function to animate the gauges
function animateGauges() {
    Object.keys(gaugeValues).forEach(gaugeId => {
        drawGauge(gaugeId, gaugeValues[gaugeId]);
        // Slowly increase the gauge value for animation
        gaugeValues[gaugeId] = (gaugeValues[gaugeId] + 0.001) % 1;
    });

setTimeout(animateGauges, 50); // Slow down the animation
}

// Function to display the reading on click
function showReading(event) {
    const canvasId = event.target.id;
    alert(`Gauge ${canvasId} reading: ${(gaugeValues[canvasId] * 100).toFixed(2)}%`);
}

// Add event listeners to the gauges
Object.keys(gaugeValues).forEach(gaugeId => {
    document.getElementById(gaugeId).addEventListener('click', showReading);
});

// Start the animation
animateGauges();

Frontend Forever App